<template>
	<view>
		<view class="panel">
			<view class="panel-view flex-sb">
				<view class="icon-view flex-sb m-l50">
					<view class="flex-d-c share-cont">
						<image class="square-50" src="@/static/images/public/share.png" />
						<text class="text-500-128">分享</text>
						<button class='share' open-type="share">分享</button>
					</view>
					<view class="flex-d-c" @click="handleSelect">
						<image v-if="position.sc_status === 1" class="square-50" src="@/static/images/public/uncollect.png" />
						<image v-else class="square-50" src="@/static/images/public/collect.png" />
						<text class="text-500-128">{{
							position.sc_status === 1 ? "已收藏" : "收藏"
						}}</text>
					</view>

					<view class="flex-d-c tsItem">
						<image class="square-50" src="@/static/images/public/complaint.png" />
						<text class="text-500-128">投诉</text>
						<button open-type="contact" session-from="sessionFrom" class="kefu"></button>
					</view>
				</view>

				<RcButton :width="192" :top="0" :size="28" :disabled="position.td_status == 1"
					:text="position.td_status === 0 ? '投递简历' : '已投递'" @click="openSendPopup" />
			</view>
		</view>
		<up-popup :show="popupState.send" mode="center" round="20rpx" @close="closeSendPopup">
			<ApplyResume @cancel="closeSendPopup" @confirm="handleSendPopupConfirm" />
		</up-popup>
		<up-popup :show="popupState.share" mode="bottom" round="20rpx" closeable @close="popupState.share = false">
			<BottomShare @cancel="popupState.share = false" />
		</up-popup>
	</view>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps, reactive } from "vue";
import RcButton from "@/components/button.vue";
import ApplyResume from "./apply-resume";
import BottomShare from "./bottom-share";
import { useNavigator } from "@/hooks/use-navigator";
import type { Office } from "@/types/api.d.ts";

const { goto } = useNavigator();

const props = defineProps<{
	position: Office;
}>();

const emit = defineEmits<{
	(e: "refresh"): void;
}>();

const popupState = reactive({
	share: false,
	send: false,
});

const handleSelect = () => {
	uni.showLoading({ mask: true });
	// 收藏 /position/addsc
	// 取消收藏 /position/delsc
	const url =
		props.position.sc_status === 1 ? "/position/delsc" : "/position/addsc";
	uni.$u
		.post(url, { position_id: props.position.id })
		.then((res) => {
			uni.$u.toast(res.msg);
			if (res.code === 1) {
				emit("refresh");
			}
		})
		.finally(() => {
			uni.hideLoading();
		});
};

// 投递简历提示弹窗 - 打开
const openSendPopup = () => {
	if (props.position.td_status == 1) return;
	popupState.send = true;
};

// 投递简历提示弹窗 - 关闭
const closeSendPopup = () => {
	popupState.send = false;
};

// 投递简历提示弹窗 - 确认
const handleSendPopupConfirm = () => {
	popupState.send = false;
	postJob();
};

// 投递简历
const postJob = () => {
	uni.showLoading({ mask: true });
	uni.$u
		.post("/position/addtd", { position_id: props.position.id })
		.then((res) => {
			uni.$u.toast(res.msg);
			if (res.code === 1) {
				emit("refresh");
			}
		})
		.finally(() => {
			uni.hideLoading();
		});
};
</script>

<style lang="scss" scoped>
.panel {
	height: 180rpx;
}

.panel-view {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 168rpx;
	padding-right: 24rpx;
	background-color: $bg-color-1;
	border-top: 1rpx solid #e0e0e0;
}

.icon-view {
	width: 310rpx;
}

.share-cont {
	position: relative;
}

.share {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.tsItem {
	position: relative;

	.kefu {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
}
</style>
